import React from 'react'
import { BaseListPage ,IBaseListPageState,IBaseListPageProps, columnRenders, UdDateRangePicker, UdDatePicker, routeUtils, http} from '@/lib';
import { Badge, Select, Button, Modal, message, Spin } from 'antd';
import apis from '@/apis/AboutQuota';
import dayjs from 'dayjs';
import udMainStore from '@/store/UdMain';
import './details.css'
const { Option } = Select
//接口字段映射
const fieldMap = {
  status:'approvalStatus'
}
const ModifyTooAli = "quota_employee_manager_pushQuotaApplyIssuedModifyTooAli" //重新推送
const DetailPage = "quota_employee_manager_getEffectIssuedQuotaDetailPage" //详情

export default class ApplicationFormList extends BaseListPage<ApplicationFormListProps, ApplicationFormListState>{
 // 隐藏掉头曲二曲
 public hideArr: any = []
 //  public brandCompanies = udMainStore.brandList.filter(item => this.hideArr.indexOf(item.title) === -1)
    constructor(props){
        super(props)
        
       this.state = {
        visible:false,
        title: "销售部配额下达申请单",
        rowKey: 'id',
        queryApi: apis.saleTransmitRequisition,
        method:'POST',
        brandCompanies: [],
        conditions: [
            { id: 'businessKey', label: '配额编号'},
            { id: 'brandCode', label: '销售组织',render: ()=>(
              <Select placeholder="请选择销售组织">
                {this.state.brandCompanies.map(({value,title})=>(<Option key={value} value={value}>{title}</Option>))}
              </Select>
            ) },
            { id: 'approvalStatus', label: '审批状态',render:()=>(
              <Select>
                 <Option value="AUDITING">审核中</Option>
                 <Option value="AUDITSUCC">审核通过</Option>
                 <Option value="AUDITFAIL">审核失败</Option>
              </Select>
          ) },
            { id: 'sendSucc', label: '推送阿里订单',render:()=>(
                <Select>
                   <Option value="Y">推送成功</Option>
                   <Option value="N">推送失败</Option>
                   <Option value="NY">正在推送</Option>
                   <Option value="WT">等待推送</Option>
                </Select>
            )},
            { id: 'createTime', label: '操作时间' ,render:()=><UdDatePicker format='YYYY-MM-DD' />},
            { id: 'createName', label: '发起人'},
        ],
        columns: [
            ['序号', 'id',(text,recode,index)=>index+1],
            ['配额编号', 'businessKey'],
            ['标题', 'description',null,{minWidth: '120px'}],
            ['销售组织', 'brandName'],
            {title:'审批状态', key:'approvalStatus',dataIndex:'approvalStatus',render: (text, record, index) => this.renderStatus(record)},
            {title:'是否推送阿里订单', key:'sendSucc', dataIndex:'sendSucc',render:(text)=>{
              let color
              let statusText
              if (text == 'Y') {
                color = '#00A854'
                statusText = '推送成功'
              } else if(text == 'N') {
                color = 'volcano'
                statusText = '推送失败'
              } else if(text == 'NY') {
                color = 'cyan'
                statusText = '正在推送'
              } else if(text == 'WT') {
                color = 'cyan'
                statusText = '等待推送'
              }
              return <Badge color={color} text={statusText}/>
            }},
            ['发起人', 'createName'],
            ['操作时间', 'createTime', (text) => <span>{text && dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>],
            {
                title: '操作',
                dataIndex: 'operate',
                fixedWidth: '120px',
                fixed: 'right',
                render:columnRenders.operate([
                  {
                    title: '查看详情', action: (text, record) => this.handeltoDetail(record),
                    auth:DetailPage
                  },
                  {
                    show: (text: any, model: any, index: number) => model.sendSucc == 'N',
                    auth:ModifyTooAli,
                    title: '重新推送', action: (text, record) => {this.handelreset(record)}
                  }
                ])
              }
        ],
        leftBtns:[
           <Button  type="primary" onClick={this.handeltonextpage}>配额下达</Button>,
        ],  
        tableProps:{
          rowSelection:null
        },
        spinning: false,
      }
      this.GetDealerInfo();
    }
    // 获取销售组织列表
    GetDealerInfo() {
      http.get(apis.GetDealerInfo)
          .then((res) => {
              // 设置销售选择销售组织的数组
              let tmpData:[] = res.data;
              let hideArr = [];
              tmpData.forEach(((item: {brandCode: string, brandName: string},index) => {
                  hideArr.push({value: item.brandCode, title:item.brandName});
              }))
              // 修改
              this.hideArr = hideArr;
              this.setState({brandCompanies: hideArr})
          })
          .catch(err => {
              throw err;
          });
    }

    render() {
      return (
        <Spin spinning={this.state.spinning} tip='推送中，请稍后...'>
          {super.render()}
        </Spin>
      )
    }

    /* 重新推送 */
    private handelreset = (record) =>{
      this.setState({ spinning: true })
      const { brandCode, businessKey, description } = record
      const params = { brandCode, businessKey, description, status: 'add' }
      http.post(apis.RePushQuotaApply, params).then(res => {
        message.success('推送成功')
        this.query()
      }).finally(() => {
        this.setState({ spinning: false })
      })
    }
    private handeltonextpage = () =>{
        this.props.history.push('/quota/monthlyquota')
    }
    private handeltoDetail = (record) =>{
      console.log(record);
     this.props.history.push(`/quota/applicationform/Detail/${record.businessKey}/${record.brandCode}/${record.brandName}/${record.approvalStatus}`)
    }
      //表格状态渲染
  private renderStatus = (record) => <><span style={{
    display: "inline-block",
    width: "6px",
    height: "6px",
    borderRadius: "6px",
    marginRight: "5px",
    marginBottom: "1px",
    backgroundColor: record[fieldMap.status] === 'AUDITING' ? "#DAA520" : record[fieldMap.status] === 'AUDITSUCC' ? "#00A854" : record[fieldMap.status] === 'AUDITFAIL' ? "#D9001B" : ""
  }}></span><span>{
    record[fieldMap.status] === 'AUDITING' ? "审核中" : record[fieldMap.status] === 'AUDITSUCC' ? "审核通过" : record[fieldMap.status] === 'AUDITFAIL' ? "审核失败" : ""
  }</span></>
}

interface ApplicationFormListState extends IBaseListPageState{
  visible:boolean
  spinning:boolean
  brandCompanies?: any[]
}

interface ApplicationFormListProps extends IBaseListPageProps {
    
}